<template>
    <div class="root">
        <div class="top">
            <p class="title">新书推荐</p>
        </div>
        <div class="content">
            <div class="books">
                <el-table :data="bookData" :header-cell-style="{'text-align': 'center'}" :cell-style="{'text-align': 'center'}" border>
                <el-table-column prop="bookName" label="书籍名称"></el-table-column>
                <el-table-column prop="bookAuthor" label="作者"></el-table-column>
                <el-table-column prop="bookPress" label="出版社"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" style="background-color: #6777ef; color: #fff; border: none;" @click="lend(scope.row.bookId)">借阅</el-button>
                    </template>
                </el-table-column>
            </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import api from '@/api/request.js'
export default {
    data () {
        return {
            bookData: [],
            params: {
                page: 1,
                pageSize: 6,
                name: ''
            },
            lendParams: {
                bookId: '',
                userId: ''
            }
        }
    },
    methods: {
        load() {
            api.list(this.params).then(res => {
                if (String(res.data.code) === '1') {
                    this.bookData = res.data.data.records;
                }
            }).catch(error => {
                console.log(error);
                this.$message.error('出错啦');
            })
        },
        lend(id) {
            this.$confirm('确定要借？？？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 借书操作
                this.lendParams.bookId = id;
                this.lendParams.userId = localStorage.getItem('employee');
                api.lendBook(this.lendParams).then(res => {
                    if (String(res.data.code) === '1') {
                        this.load();
                    } else {
                        this.$message(res.data.msg);
                    }
                    }).catch(error => {
                    console.log(error);
                    this.$message.error('出错啦');
                })
                }).catch(() => {
                this.$message({type: 'info', message: '已取消'});          
            });
        }
    },
    created () {
        this.load();
    }
}
</script>

<style scoped>
    .root {
        padding: 2px 40px;
    }
    
    .title {
        font-size: 28px;
        font-weight: 600;
        font-family: Lobster, cursive;;
    }
</style>